<template>
	<div class="meetingbody" id="meetingbody">
		<div id="leftFixed" :style="{width:view.leftName +'px','max-height':leftFixedHeigt+'px'}">
			<table class="namebox" :style="{'width':view.leftName+'px'}">
				<colgroup>
					<col name="meetName" :style="{'width':view.leftName+'px'}">
					<col :name="index" :style="{'width':view.tdWidth+'px'}" v-for="(item,index) in TitleTimes" :key="index"/>
				</colgroup>
				<thead>
				<th>会议室名称</th>
				</thead>
				<tbody>
				<tr v-for="(row,index) in roomList" :key="index">
					<td>
						<i class="iconfont icon-star shoucang"  v-if="!row.IsFavorite" @click="addfavorite(row)"></i>
						<i class="iconfont icon-star-copy shoucang" v-else @click="removefavorite(row)"></i>
						<el-popover placement="bottom-start" width="400" trigger="click">
						<meetInfo :info="row"></meetInfo>
						<span slot="reference" style="cursor: pointer">{{row.RoomName}}({{row.Capacity}}人)	</span>
						</el-popover>
					</td>
				</tr>
				</tbody>
			</table>
		</div>
		<div class="HeaderFixed" id="HeaderFixed" :style="{'max-width':headerFixedWidth+'px'}">
			<table class="namebox" :style="{'width':view.timesWidth+'px'}">
				<colgroup>
					<col name="meetName" :style="{'width':view.leftName+'px'}">
					<col :name="index" :style="{'width':view.tdWidth+'px'}" v-for="(item,index) in TitleTimes" :key="index"/>
				</colgroup>
				<thead>
				<th :style="{'width':view.leftName+'px'}">会议室名称</th>
				<th class="timetitle" v-for="(item,index) in TitleTimes" :key="index">{{item}}:00</th>
				</thead>
				<tbody>
				</tbody>
			</table>
		</div>
		<div class="HeaderFixedLeft" id="HeaderFixedLeft" :style="{'width':view.leftName+'px'}">
			<table class="namebox" :style="{'width':view.leftName+'px'}">
				<colgroup>
					<col name="meetName" :style="{'width':view.leftName+'px'}">
				</colgroup>
				<thead>
				<th>会议室名称</th>
				</thead>
				<tbody>
				</tbody>
			</table>
		</div>
		<div class="timesTable" id="timesTable" :style="{'overflow-x':view.overflowx}" @scroll="timesTablescroll($event)">
			<div class="markGroup" @mouseenter.self="mouseentermarkGroup">
				<el-tooltip class="item" popper-class="timetip" effect="dark" transition="none" :manual="true" content="请选择结束时间"
				            placement="bottom-end" v-model="view.showMymark">
					<div slot="content">
						<a>请选择结束时间</a>
					</div>
					<div class="evenMark destine "
					     v-show="(operatingState=='selection'||operatingState=='form'||operatingState=='minTime')"
					     :style="Marklocation(destine.timeregion[0],destine.timeregion[1],destine.index)" ref="destine">
						<el-popover
										placement="bottom"
										width="500"
										trigger="manual"
										v-model="view.showForm" ref="Formpopover">
							<MeetingForm @close="initdestine" v-if="view.showForm" @submit="dodestine" v-model="destine"
							             :events="roomList[destine.index].ReservelList" :day="day" @input="reloaddestineMark"></MeetingForm>
							<div slot="reference" style="width: 100%;height: 100%;color: #fff;line-height: 32px;text-align: center">{{chooseTimeLength()}}</div>
						</el-popover>
					</div>
				</el-tooltip>

				<template v-for="(row,lineIndex) in roomList">
					<div class="evenMark history el-popover__reference" :key="lineIndex+'-'+itemIndex" v-for="(item,itemIndex) in row.ReservelList"
					     :style="Marklocation(item.BeginTimeStamp,item.EndTimeStamp,lineIndex)"
					     :class="{'isMe': item.BookerUserID==user.UserID }" @click="showdestineModel(item.ReserveID, {row:lineIndex,num:itemIndex},$event) ">
						<!--<img src="../../../../assets/images/xiaoren.png"/>-->
					</div>
				</template>
			</div>
			<table :style="{'width':view.timesWidth+'px'}" id="mainTable">
				<colgroup>
					<col name="meetName" :style="{'width':view.leftName+'px'}">
					<col :name="index" :style="{'width':view.tdWidth+'px'}" v-for="(item,index) in TitleTimes" :key="index"/>
				</colgroup>
				<thead>
				<th :style="{'width':view.leftName+'px'}" class="meetName">会议室名称</th>
				<th class="timetitle" v-for="(item,index) in TitleTimes" :key="index">{{item}}:00</th>
				</thead>
				<tbody>
				<tr v-for="(row,index) in roomList" :key="index" ref="rows">
					<td>
						<div style="height: 100%">
						</div>
					</td>
					<td v-for="(item,ind) in TitleTimes" :key="ind">
						<cell :whole-point="item" :operating-state="operatingState" :day="day" :row="row" :timestamp="timestamp" :index="index" ref="cells"></cell>
					</td>
				</tr>
				</tbody>
			</table>
		</div>
		<div class="notAllowCellTip" v-show="notallowtip.show"
		     :style="{'left':notallowtip.left +'px','top':notallowtip.top+'px'}">该时间不可用
		</div>
		<div class="mouseOverScroll" @mouseenter.self="mouseScroll('left')" @mouseleave.self="mouseScrollLeave"
		     :style="{left:mouseOverScrollLeft+'px'}" v-if="view.mouseOverScroll.showLeft"></div>
		<div class="mouseOverScroll" @mouseenter.self="mouseScroll('right')" @mouseleave.self="mouseScrollLeave"
		     :style="{right:mouseOverScrollRight+'px'}" v-if="view.mouseOverScroll.showRight"></div>
		<div style="width: 400px" class="el-popover el-popper el-popover--plain" ref="destinemodel">
			<destine-model :ReserveID="destineModel.ReserveID" v-if="destineModel.show"
			               @Canlcereserver="Canlcereserver" :index="destineModel.index" style="min-height: 160px"></destine-model>
			<div x-arrow="" class="popper__arrow" ></div>
		</div>
		<div class="nofindbox" v-if="notdata">
			<img src="../../../../assets/images/nofind.png">
			<p>没有找到可用会议室，可尝试更改<span class="tip">会议室位置</span>或<span class="tip">日期</span></p>
		</div>
</div>
</template>
<script type="es6">
import {MeetingTable} from '@/config';
import cell from './timeCell';
import MeetingForm from './MeetingForm';
import meetInfo from '../meetInfo';
import destineModel from './destineModel';
import eventBus from '@/libs/eventBus';
import scrollBarWidth from '@/libs/scrollbar-width.js';
import {mapState} from 'vuex';
import API from '@/API';
import meetingTable from '../../../mixin/meetingTable';
import {TimeLength, lengthTimestramp} from '@/libs';
export default {
  mixins: [meetingTable],
  data () {
    return {
      TitleTimes: MeetingTable.Daily.times,
      timer: null,
      view: {
        tdHeight: 33,
        tdMinWidth: 120,
        thHeight: 38,
        leftName: 271,
        timesWidth: 0,
        viewBoxWithd: 0,
        tdWidth: 120,
        timeBoxWithd: 0, // 表格时间部门宽度
        beginTimestarp: 0, // 当天开始的时间戳
        endTimestarp: 0, // 当天结束的时间戳
        showMymark: false,
        overflowx: 'auto',
        overflowy: 'auto',
        showForm: false,
        reloadView: true,
        mainHeight: 0,
        mouseOverScroll: {
          showLeft: false,
          showRight: false,
          timer: null,
          position: 'left',
          speed: [3, 2]
        },
        destinePopper: null
      },
      operatingState: 'wait', // wait（可预定）selection 选择中 form 表单填写阶段 minTime 选择了小于当前时间
      destine: { // 预定相关数据
        timeregion: [0, 0], // [0, 0],
        row: '',
        index: 0,
        firstLocation: [],
        allowRegion: [] // 允许拖拽小格 的时间范围
      },
      notallowtip: {
        show: false,
        left: 0,
        top: 0,
        timer: null
      },
      destineModel: {
        show: false,
        ReserveID: '',
	      index: {
	      }
      },
      updateCellTimer: null
    };
  },
  props: {
    day: {
      type: String,
      default: ''
    },
	  timestamp: {
      type: Number,
		  default: 0
	  },
    roomList: {
      type: Array,
      default: () => {
        return [];
      }
    },
    notdata: {
      type: Boolean,
      default: () => {
        return false;
      }
    }
  },
  components: {
    cell,
    MeetingForm,
    destineModel,
    meetInfo
  },
  computed: {
    ...mapState({
      user: state => state.user
    }),
    leftFixedHeigt () {
      let height = this.view.mainHeight - 3;
      if (this.view.overflowx === 'auto') {
        height = height - scrollBarWidth();
      }
      return height;
    },
    headerFixedWidth () {
      let width = this.view.viewBoxWithd - 3;
      return width;
    },
    mouseOverScrollLeft () {
      return this.view.leftName;
    },
    mouseOverScrollRight () {
      if (this.view.overflowy === 'auto') {
        return scrollBarWidth();
      }
      return 0;
    }
  },
  methods: {
    init () {
      setTimeout(() => {
        this.autoWith();
      }, 50);
      // setTimeout(() => {
      //   this.autoWith();
      // }, 100);
      this.processingData(); // 处理 table 数据
      window.onresize = () => {
        if (this.timer) {
          clearTimeout(this.timer);
        }
        this.timer = setTimeout(() => {
          this.autoWith();
        }, 50);
        eventBus.$emit('onresize');
      };
      this.dotimestamp();
      // 判断是否是IE
      let navigatorName = 'Microsoft Internet Explorer';
      if (navigator.appName === navigatorName) {
        this.view.mouseOverScroll.speed = [3, 10];
      }
      // this.updateCellTimer = setInterval(() => {
      //   this.updateCellAllow();
      // }, 60000);
    },
	  dotimestamp () {
      // 开始结束的时间戳
      // let today = new Date(this.day);
      // today.setHours(this.TitleTimes[0]);
      // this.view.beginTimestarp = today.getTime();
      // today.setHours(this.TitleTimes[this.TitleTimes.length - 1] + 1);
      // this.view.endTimestarp = today.getTime();
		  if (!this.timestamp) {
		    return;
		  }
      this.view.beginTimestarp = lengthTimestramp(this.timestamp, 0, this.TitleTimes[0], 0);
      this.view.endTimestarp = lengthTimestramp(this.timestamp, 0, this.TitleTimes[this.TitleTimes.length - 1] + 1, 0);
      this.destine.allowRegion[0] = this.view.beginTimestarp;
      this.destine.allowRegion[1] = this.view.endTimestarp;
	  },
    canceldestine (e) {
      try {
        if (this.$refs.destine.contains(e.target)) {
          this.endChoose(); // 修复IE 点击问题
          return;
        }
        if (!this.$refs.rows[this.destine.index].contains(e.target)) {
          this.initdestine();
          this.$nextTick(() => {
            document.removeEventListener('click', this.canceldestine, false);
          });
        }
      } catch (e) {
      }
    },
    initdestine () {
      this.destine = { // 预定相关数据
        timeregion: [],
        row: {},
        index: 0,
        firstLocation: [],
        allowRegion: [this.view.beginTimestarp, this.view.endTimestarp] // 允许拖拽小格 的时间范围
      };
      this.view.showForm = false;
      this.view.showMymark = false;
      this.judgemouseOverScroll();
      this.$nextTick(() => {
        this.operatingState = 'wait';
      });
    },
    processingData () {
      // 处理 table 数据
      // this.tableData.forEach((item, index) => {
      //   item.index =
      //   evens.push();
      // });
    },
    autoWith () {
      let sw = 0;
      // 判断是否有纵向滚动条
      let maintableH = document.getElementById('mainTable').offsetHeight;
      let timesTableH = document.getElementById('timesTable').offsetHeight;
      if (this.view.overflowx === 'auto') {
        // 如果有横线滚动条
        if (maintableH >= timesTableH - scrollBarWidth()) {
          this.view.overflowy = 'auto';
        } else {
          this.view.overflowy = 'hidden';
        }
      } else {
        if ((maintableH - timesTableH) > 0) {
          this.view.overflowy = 'auto';
        } else {
          this.view.overflowy = 'hidden';
        }
      }
      if (this.view.overflowy === 'auto') {
        sw = scrollBarWidth();
      } else {
        sw = 0;
      }

      let viewBoxWithd = document.getElementById('meetingbody').offsetWidth - sw; // 可是区域宽度
      this.view.viewBoxWithd = document.getElementById('meetingbody').offsetWidth - sw; // 可是区域宽度
      let timesW = viewBoxWithd - this.view.leftName;
      this.view.timeBoxWithd = timesW;
      if (timesW < this.view.tdMinWidth * this.TitleTimes.length) {
        this.view.timesWidth = this.view.tdMinWidth * this.TitleTimes.length + this.view.leftName;
        this.view.tdWidth = 120;
        this.view.overflowx = 'auto';
      } else {
        this.view.timesWidth = viewBoxWithd;
        this.view.tdWidth = Math.round(timesW / this.TitleTimes.length);

        this.view.timesWidth = this.view.tdWidth * this.TitleTimes.length + this.view.leftName;
        this.view.overflowx = 'hidden';
      }
      this.view.mainHeight = document.getElementById('meetingbody').offsetHeight;

      this.$nextTick(() => {
        // this.view.leftName = document.getElementsByClassName('meetName')[0].offsetWidth;
        this.scrollNow();
        this.judgemouseOverScroll();
      });
    },
    timesTablescroll (event) {
      document.getElementById('leftFixed').scrollTop = event.target.scrollTop;
      document.getElementById('HeaderFixed').scrollLeft = event.target.scrollLeft;
      // 判断是否滚动到头
      let scrollLeft = event.target.scrollLeft;
      let viewwitdth = event.target.offsetWidth;
      if (scrollLeft === 0) {
        this.view.mouseOverScroll.position = 'left';
      } else if (scrollLeft + viewwitdth === document.getElementById('mainTable').offsetWidth) {
        this.view.mouseOverScroll.position = 'right';
      } else if (scrollLeft + viewwitdth > document.getElementById('mainTable').offsetWidth) {
        if (scrollLeft + viewwitdth - scrollBarWidth() === document.getElementById('mainTable').offsetWidth) {
          this.view.mouseOverScroll.position = 'right';
        } else {
          this.view.mouseOverScroll.position = 'middle';
        }
      } else {
        this.view.mouseOverScroll.position = 'middle';
      }
      this.judgemouseOverScroll();
    },
    reloaddestineMark () {
      this.view.reloadView = false;
      this.$nextTick(() => {
        this.view.reloadView = true;
        this.$refs.Formpopover.updatePopper();
      });
    },
    scrollNow () {
      if (this.view.overflowx === 'auto') {
        let timelen = Date.now() - this.view.beginTimestarp;
        let Lnum = timelen / (15 * 60 * 1000);
        let left = (Lnum * this.view.tdWidth / 4);
        document.getElementById('timesTable').scrollLeft = left;
      }
    },
    judgemouseOverScroll () {
      if (this.view.overflowx === 'hidden') {
        this.view.mouseOverScroll.showLeft = false;
        this.view.mouseOverScroll.showRight = false;
        this.mouseScrollLeave();
      } else {
        if (this.operatingState === 'selection') {
          if (this.view.mouseOverScroll.position !== 'left') {
            this.view.mouseOverScroll.showLeft = true;
          } else {
            this.view.mouseOverScroll.showLeft = false;
            this.mouseScrollLeave();
          }
          if (this.view.mouseOverScroll.position !== 'right') {
            this.view.mouseOverScroll.showRight = true;
          } else {
            this.view.mouseOverScroll.showRight = false;
            this.mouseScrollLeave();
          }
        } else {
          this.view.mouseOverScroll.showLeft = false;
          this.view.mouseOverScroll.showRight = false;
          this.mouseScrollLeave();
        }
      }
    },
    mouseScroll (type) {
      this.view.mouseOverScroll.timer = setInterval(() => {
        this.mouseScrollTimer(type);
      }, this.view.mouseOverScroll.speed[0]);
    },
    mouseScrollTimer (type) {
      if (type === 'right') {
        // 判断是否滚动到头
        if (this.view.mouseOverScroll.showRight.position === 'right') {
          this.view.mouseOverScroll.showRight = false;
          this.mouseScrollLeave();
        } else {
          document.getElementById('timesTable').scrollLeft = document.getElementById('timesTable').scrollLeft + this.view.mouseOverScroll.speed[1];
        }
      } else if (type === 'left') {
        if (this.view.mouseOverScroll.showRight.position === 'left') {
          this.view.mouseOverScroll.showLeft = false;
          this.mouseScrollLeave();
        } else {
          document.getElementById('timesTable').scrollLeft = document.getElementById('timesTable').scrollLeft - this.view.mouseOverScroll.speed[1];
        }
      }
    },
    mouseScrollLeave () {
      if (this.view.mouseOverScroll.timer) {
        clearInterval(this.view.mouseOverScroll.timer);
      }
    },
    TimeCellClick (data) {
      if (this.operatingState === 'wait') {
        if (data.row.ApprovalType === 2 && this.user.UserID !== data.row.AdminUserID) {
          // 管理员预定会议室
          this.initdestine();
          this.showAdminReserverTip(data.row);
	        return;
        }
        this.destine.timeregion = data.time;
        this.destine.firstLocation = JSON.parse(JSON.stringify(data.time));
        this.destine.row = data.row;
        this.operatingState = 'selection';
        this.view.showMymark = true;
        this.destine.index = data.index;
        if (Date.now() >= data.time[1]) {
          this.operatingState = 'minTime';
        }
        // 添加监听 点击其他地方 取消预定过程状态
        this.$nextTick(() => {
          document.addEventListener('click', this.canceldestine, false);
          this.judgemouseOverScroll();
        });
        // 计算 允许拖拽的小各子的
        let min = '';
        let max = '';
        this.destine.row.ReservelList.forEach((item) => {
          if (this.destine.timeregion[0] >= item.EndTimeStamp) {
            if ((min && item.EndTimeStamp > min) || !min) {
              min = item.EndTimeStamp;
            }
          }
          if (item.BegionTimeStamp >= this.destine.timeregion[1]) {
            if ((max && item.BegionTimeStamp < max) || !max) {
              max = item.BegionTimeStamp;
            }
          }
        });
        if (min) {
          this.destine.allowRegion[0] = min;
        }
        if (max) {
          this.destine.allowRegion[1] = max;
        }
        if (Date.now() > this.destine.allowRegion[0]) {
          this.destine.allowRegion[0] = Date.now();
        }
      } else if (this.operatingState === 'selection' && data.row.RoomID === this.destine.row.RoomID) {
        // 选择结束
        this.endChoose();
      } else if (this.operatingState === 'minTime') {
        this.initdestine();
      }
    },
    endChoose () {
      // 选择结束
      this.operatingState = 'form';
      this.view.showMymark = false;
      this.judgemouseOverScroll();
      this.$nextTick(() => {
        document.removeEventListener('click', this.canceldestine, false);
        this.view.showForm = true;
      });
    },
    dodestine (callback) {
      // 预订提交
      console.log(this.destine);
      API.reserverStart({
        RoomID: this.destine.row.RoomID,
        BookerUserID: this.destine.BookerUserID,
        BookerUserName: this.destine.BookerUserName,
        ExecutorUserID: this.destine.ExecutorUserID,
        ExecutorUserName: this.destine.ExecutorUserName,
        Theme: this.destine.inputTheme,
        Agenda: this.destine.note,
        BeginTimeStamp: this.destine.timeregion[0],
        EndTimeStamp: this.destine.timeregion[1],
        ReserverMode: 0,
        ReserverType: 0
      }).then((res) => {
        let json = res.data;
        if (json.status === '200') {
          callback();
          this.$notify({
            title: '成功',
            message: '会议室预订成功',
            type: 'success'
          });
          // 判断状态是否审批
          if (json.data.ReserverStatus === 0) {
            this.$confirm(`本次预定需要管理员：${this.destine.row.AdminName}，进行审批`, '提示', {
              confirmButtonText: '确定',
              type: 'warning'
            }).then(() => {
            }).catch(() => {
            });
          }
          this.destine.row.ReservelList.push(json.data);
          this.operatingState = 'wait';
          this.initdestine();
        } else {
          this.$notify({
            title: '预订失败',
            message: json.err,
            type: 'error'
          });
          if (json.status === '200000') {
            this.$parent.search();
          }
          callback();
        }
      }).catch((e) => {
        callback();
      });
    },
    mouseenterTimeCell (data) {
      if (this.operatingState === 'selection' && data.row.RoomID === this.destine.row.RoomID) {
        let choseBegin = data.time[0];
        let choseEnd = data.time[1];
        // 判断所选时间 是否在允许的范围内
        if (this.destine.allowRegion[0] > choseBegin) {
          if (((this.destine.allowRegion[0] - choseBegin) / (60000)) > 15) {
            return;
          }
        }
        if (choseEnd > this.destine.allowRegion[1]) {
          return;
        }
        // 左右选择
        if (choseEnd > this.destine.firstLocation[1]) {
          this.destine.timeregion[1] = choseEnd;
          this.destine.timeregion[0] = this.destine.firstLocation[0];
        } else if (this.destine.firstLocation[0] > choseBegin) {
          this.destine.timeregion[0] = choseBegin;
          this.destine.timeregion[1] = this.destine.firstLocation[1];
        } else if (this.destine.firstLocation[0] === choseBegin && this.destine.firstLocation[1] === choseEnd) {
          this.destine.timeregion = data.time;
        }
        this.view.showMymark = false;
        this.$nextTick(() => {
          this.view.showMymark = true;
        });
      } else if (this.operatingState === 'minTime') {
        this.initdestine();
      }
    },
    Marklocation (begin, end, index) {
      if (this.view.reloadView) {
        // 遮层位置
        if (end < this.view.beginTimestarp) {
          return {};
        }
        if (begin < this.view.beginTimestarp) {
          begin = this.view.beginTimestarp;
        }
        if (end > this.view.endTimestarp) {
          end = this.view.endTimestarp;
        }
        let map = {};
        let begindifference = begin - this.view.beginTimestarp;
        let boxtimeLen = end - begin;
        let Lnum = boxtimeLen / (15 * 60 * 1000);
        let Snum = begindifference / (15 * 60 * 1000);
        let left = (Snum * this.view.tdWidth / 4) + this.view.leftName;
        let width = (Lnum * this.view.tdWidth / 4);
        map.left = left + 'px';
        map.width = width - 1 + 'px';
        let top = this.view.thHeight + index * this.view.tdHeight;
        map.top = top + 'px';
        return map;
      }
      this.view.reloadView = true;
    },
    chooseTimeLength () {
      if (this.view.reloadView) {
        let start = this.destine.timeregion[0];
        let end = this.destine.timeregion[1];
        return TimeLength(start, end);
      }
      return '';
    },
    notAllowCell (event) {
      if (this.notallowtip.timer) {
        clearTimeout(this.notallowtip.timer);
      }
      this.notallowtip.show = true;
      this.notallowtip.left = event.clientX + 5;
      this.notallowtip.top = event.clientY + 5;
    },
    notAllowCellleave () {
      this.notallowtip.timer = setTimeout(() => {
        this.notallowtip.show = false;
      }, 200);
    },
    mouseentermarkGroup () {
      if (this.operatingState === 'minTime') {
        this.initdestine();
      }
    },
    updateCellAllow () {
      if (this.$refs.cells) {
        this.$refs.cells.forEach((item) => {
          item.updateCellAllow();
        });
      }
    }
  },
  mounted () {
    this.init();
    // 监听 小单元格点击
    eventBus.$on('choseTimeCell', (data) => {
      this.TimeCellClick(data);
    });
    // 监听 小单元格鼠标滑过
    eventBus.$on('mouseenterTimeCell', (data) => {
      this.mouseenterTimeCell(data);
    });
    eventBus.$on('notAllowCell', (event) => {
      this.notAllowCell(event);
    });
    eventBus.$on('notAllowCellleave', () => {
      this.notAllowCellleave();
    });
  },
  watch: {
    day () {
      this.initdestine();
    },
    timestamp () {
      this.dotimestamp();
    }
  },
  destroyed () {
    eventBus.$off('choseTimeCell');
    eventBus.$off('notAllowCell');
    eventBus.$off('mouseenterTimeCell');
    eventBus.$off('notAllowCellleave');
    window.onresize = null;
    this.showdestineModelToggle();
    if (this.updateCellTimer) {
      clearInterval(this.updateCellTimer);
    }
  }
};
</script>
<style lang="less" scoped>
	@tdHeight: 30px;
	@thHeight: 35px;
	.meetingbody {
		border: 1px solid #ccc;
		height: 100%;
		width: 100%;
		position: relative;
		overflow: hidden;
		#leftFixed {
			width: 279px;
			float: left;
			position: absolute;
			top: 0;
			left: 0;
			background: #fff;
			overflow: hidden;
			z-index: 3;
			.namebox {
				width: 100%;
				text-align: center;
				border-collapse: separate;
				border-spacing: 0px;
				table-layout: fixed;
				th {
					height: @thHeight;
					border-bottom: 1px solid #dcdada;
					border-right: 1px solid #dcdada;
					background: #fff;
				}
				td {
					height: @tdHeight;
					border-bottom: 1px solid #dcdada;
					border-right: 1px solid #dcdada;
					background: #fff;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
					text-align: left;
					padding-left: 8px;
					.iconfont {
						font-size: 14px;
						margin-right: 8px;
						cursor: pointer;
					}
					.icon-star-copy.shoucang{
						color: #f6bf00;
					}
					.icon-star.shoucang{
						font-size: 15px;
					}
				}
			}
		}
		.timesTable, .HeaderFixed, .HeaderFixedLeft {
			overflow: auto;
			height: 100%;
			position: relative;
			table {
				text-align: center;
				border-collapse: separate;
				border-spacing: 0px;
				thead {
					font-size: 14px;
					th {
						border-bottom: 1px solid #dcdada;
						border-right: 1px solid #dcdada;
					}
					.meetName {
						width: 279px;
					}
					th:last-child {
						border-right: none;
					}
					.timetitle {
						height: @thHeight;
					}
				}
				tbody {
					tr {
						position: relative;
						td {
							border-bottom: 1px solid #dcdada;
							border-right: 1px solid #dcdada;
							height: @tdHeight;
						}
						td:last-child {
							border-right: none;
						}
					}
				}
			}
		}
		.HeaderFixed, .HeaderFixedLeft {
			position: absolute;
			top: 0;
			height: 38px;
			z-index: 4;
			background: #fff;
			overflow: hidden;
		}
		.HeaderFixedLeft {
			table thead th {
				height: @thHeight;
			}
			table thead th:last-child {
				border-right: 1px solid #dcdada;
			}
		}
	}

	.evenMark {
		height: 32px;
		position: absolute;
	}

	.markGroup {
		position: absolute;
		height: 100%;
		width: 100%;
		left: 0;
		top: 0;
	}

	.destine {
		background-color: rgba(248, 111, 133, 0.6);
		pointer-events: none;
	}

	.history {
		background: #5ba9f3;
		z-index: 1;
		text-align: center;
		overflow: hidden;
		cursor: pointer;
		img {
			margin-top: 5px;
		}
	}

	.history.isMe {
		background: #f86f85;
	}

	.history:focus {
		outline: none;
	}

	.notAllowCellTip {
		position: fixed;
		padding: 5px 10px;
		border-radius: 4px;
		color: #fff;
		z-index: 8000;
		background: rgba(48, 49, 51, 0.7);
		transition: all .3s ease;
	}

	.mouseOverScroll {
		position: absolute;
		width: 35px;
		height: 100%;
		cursor: pointer;
		top: 0;
		.right {
			right: 0;
		}
	}
	.nofindbox{
		position: absolute;
		width: 100%;
		height: 100%;
		text-align: center;
		top: @thHeight;
		color: #8e8c8c;
		img{
			margin-top: 50px;
		}
		.tip{
			color: #333333;
		}
	}

</style>
